<template>
    <div class="footer">
        <ul class="nav full-left">
            <router-link to="/Home"><img @click="jump('/Home')" src="@/assets/img/home.png"></router-link>
            <router-link to="/Cart"><img @click="jump('/Cart')" src="@/assets/img/cart.png" alt=""></router-link>
            <router-link to="/Map"><img @click="jump('/Map')" src="@/assets/img/wz.png"></router-link>
            <router-link to="/VIP"><img @click="jump('/VIP')" src="@/assets/img/mem.png"></router-link>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Footer",
        data() {
            return {
                this_nav: "",
            }
        },
        created() {
            this.this_nav = localStorage.this_nav;
        },
        methods: {
            jump(location) {
                localStorage.this_nav = location;
                // vue-router除了提供router-link标签跳转页面以外，还提供了js跳转的方式
                this.$router.push(location);
            }
        }
    }
</script>

<style scoped>
    .footer {
        width: 100%;
        height: 128px;
        background: #25292e;
        color: #fff;
    }

    .footer ul {
        margin: 0 auto 16px;
        padding-top: 38px;
        width: 810px;
    }

    .footer ul li {
        float: left;
        width: 112px;
        margin: 0 10px;
        text-align: center;
        font-size: 14px;
    }

    .footer ul::after {
        content: "";
        display: block;
        clear: both;
    }

    .footer p {
        text-align: center;
        font-size: 12px;
    }
</style>
